@import 'bootstrap';
@import 'respons-utils';
@import 'reset';
@import 'vars';
@import 'loader';
@import 'layout/cms-view';

// Partials
@import 'topnav';
@import 'home';
@import 'about';
@import 'data-connect';
@import 'retweet-modal';
@import 'copy-link-modal';
@import 'search';
@import 'single-tweet';
@import 'single-imported-status';
@import 'wall';
@import 'map';
@import 'topology';
@import 'report';

// Libs
@import 'datetimepicker';
@import 'leaflet';
@import 'photoswipe';
@import 'admin';
@import 'leaflet';
@import 'skins/skin-blue';
@import 'default-skin/default-skin';
@import 'fa';
@import 'ionicons';
@import 'colorpicker';
@import 'nya-bs-select';
@import 'select';


/* Global styles */
.view-container {
	padding-top: 46px;
	min-height: 100vh;
}

.Emoji--forText {
    width: 6%;
    padding: 0 .5% 0 .5%;
    vertical-align: middle;
}

* {
    font-family: $font-family;
}
.wrapper {
	background-color: white !important;
}

.btn-loklak-blue {
	color: #fff;
	background-color: $btn-loklak-blue;
	border-color: #00acd6;
}

.btn-loklak-blue[disabled]:hover,
.btn-loklak-blue[disabled]:focus {
	background-color: $btn-loklak-blue;
	border-color: #00acd6;
}

.btn-loklak-blue:focus {
	color: #fff;
	background-color: $btn-loklak-blue-hover;
	border-color: #269abc;
	outline: none;
}

.btn-loklak-blue:hover {
	color: #fff;
	background-color: $btn-loklak-blue-hover;
	border-color: #269abc;
	text-decoration: none;
}


/* Old styles */

	body {
	    font-family: Helvetica, sans-serif;
	    background-color: #F5F8FA;
	}


	.side {
	    .side-block {
	        background-color: $background-dark;
	        -moz-border-radius: 4px;
	        -webkit-border-radius: 4px;
	        border-radius: 4px;
	        -khtml-border-radius: 4px;
	        padding: 20px;
	    }
	}

	.status {
	    padding-bottom: 10px;
	    border-bottom: 1px solid $border-light;
	    margin-bottom: 20px;
	    &.highlight {
	        .inner {
	            margin-left: 218px;
	            .header {
	                .user-avatar {
	                    width: 200px;
	                    height: 200px;
	                    margin-left: -218px;
	                }
	            }
	            .content {
	                font-size: 20px;
	            }
	        }
	    }
	    .inner {
	        margin-left: 58px;
	        .header {
	            .user-avatar {
	                float: left;
	                margin-top: 3px;
	                margin-left: -58px;
	                width: 48px;
	                height: 48px;
	                border-radius: 5px;
	                -moz-force-broken-image-icon: 1;
	            }
	        }
	    }
	}

	.masonry-brick {
	    width: 33.2%;
	    padding: 5px;
	}

	.masonry-brick img {
	    display: block;
	    width: 100.5%;
	    -webkit-border-radius: 4px;
	    -moz-border-radius: 4px;
	    -khtml-border-radius: 4px;
	    border-radius: 4px;
	}

	.evaluation {
	    > div.row {
	        text-align: center;
	    }
	    form {
	        display: inline-block;
	    }
	}

	.eval-widget {
	    .item {
	        min-height: 42px;
	    }
	    margin-top: 50px;
	    padding: 15px;
	    h1 {
	        text-align: center;
	    }
	    border: 1px solid #b4b4b4;
	    border-radius: 7px;
	    .item {
	        position: relative;
	        margin-top: 11px;
	    }
	    p {
	        display: inline-block;
	        position: relative;
	        z-index: 200;
	        font-size: 16px;
	        margin-top: 10px;
	        margin-left: 25px;
	    }
	    .percentage {
	        float: right;
	        display: inline-block;
	        position: relative;
	        z-index: 200;
	        font-size: 16px;
	        margin-top: 10px;
	        margin-right: 15px;
	    }
	    .percent-bar {
	        position: absolute;
	        z-index: 100;
	        left: 15px;
	        height: 100%;
	        border-radius: 5px;
	    }
	}

	.tweeters .percent-bar {
	    background-color: #9BD5BB;
	}

	.mentions .percent-bar {
	    background-color: #87AFCC;
	}

	.tags .percent-bar {
	    background-color: #D6A6BC;
	}

	.date-input {
	    min-width: 275px;
	}

	.wall {
	    margin-top: -70px;
	}

	.wall-search {
	    width: 400px;
	    margin: 0 auto;
	    text-align: center;
	    form {
	        display: inline-block;
	    }
	}

	.wall-display {
	    h1 {
	        text-align: center;
	        font-size: 100px;
	    }
	    .status-list {
	        margin-top: 60px;
	    }
	}

	#wrapper {
	    padding-left: 0;
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	#wrapper.toggled {
	    padding-left: 250px;
	}

	#sidebar-wrapper {
	    z-index: 1000;
	    position: fixed;
	    left: 250px;
	    width: 0;
	    height: 100%;
	    margin-left: -250px;
	    overflow-y: auto;
	    background: #000;
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	#wrapper.toggled #sidebar-wrapper {
	    width: 250px;
	}

	#page-content-wrapper {
	    width: 100%;
	    position: absolute;
	    padding: 15px;
	}

	.navbar {
	    background-color: $background-top;
	    border: 0;
	    .navbar-brand {
	        color: #fff;
	    }
	}

	.side {
	    .side-block {
	        background-color: $background-dark;
	        -moz-border-radius: 4px;
	        -webkit-border-radius: 4px;
	        border-radius: 4px;
	        -khtml-border-radius: 4px;
	        padding: 20px;
	    }
	}

	.status {
	    padding-bottom: 10px;
	    border-bottom: 1px solid $border-light;
	    margin-bottom: 20px;
	    &.highlight {
	        .inner {
	            margin-left: 218px;
	            .header {
	                .user-avatar {
	                    width: 200px;
	                    height: 200px;
	                    margin-left: -218px;
	                }
	            }
	            .content {
	                font-size: 20px;
	            }
	        }
	    }
	    .inner {
	        margin-left: 58px;
	        .header {
	            .user-avatar {
	                float: left;
	                margin-top: 3px;
	                margin-left: -58px;
	                width: 48px;
	                height: 48px;
	                border-radius: 5px;
	                -moz-force-broken-image-icon: 1;
	            }
	        }
	    }
	}

	.masonry-brick {
	    width: 33.2%;
	    padding: 5px;
	}

	.masonry-brick img {
	    display: block;
	    width: 100.5%;
	    -webkit-border-radius: 4px;
	    -moz-border-radius: 4px;
	    -khtml-border-radius: 4px;
	    border-radius: 4px;
	}

	.evaluation {
	    > div.row {
	        text-align: center;
	    }
	    form {
	        display: inline-block;
	    }
	}

	.eval-widget {
	    .item {
	        min-height: 42px;
	    }
	    margin-top: 50px;
	    padding: 15px;
	    h1 {
	        text-align: center;
	    }
	    border: 1px solid #b4b4b4;
	    border-radius: 7px;
	    .item {
	        position: relative;
	        margin-top: 11px;
	    }
	    p {
	        display: inline-block;
	        position: relative;
	        z-index: 200;
	        font-size: 16px;
	        margin-top: 10px;
	        margin-left: 25px;
	    }
	    .percentage {
	        float: right;
	        display: inline-block;
	        position: relative;
	        z-index: 200;
	        font-size: 16px;
	        margin-top: 10px;
	        margin-right: 15px;
	    }
	    .percent-bar {
	        position: absolute;
	        z-index: 100;
	        left: 15px;
	        height: 100%;
	        border-radius: 5px;
	    }
	}

	.tweeters .percent-bar {
	    background-color: #9BD5BB;
	}

	.mentions .percent-bar {
	    background-color: #87AFCC;
	}

	.tags .percent-bar {
	    background-color: #D6A6BC;
	}

	.date-input {
	    min-width: 275px;
	}

	.wall {
	    margin-top: -70px;
	}

	.wall-search {
	    width: 400px;
	    margin: 0 auto;
	    text-align: center;
	    form {
	        display: inline-block;
	    }
	}

	.wall-display {
	    h1 {
	        text-align: center;
	        font-size: 100px;
	    }
	    .status-list {
	        margin-top: 60px;
	    }
	}

	.animate-repeat.ng-enter-stagger,
	.animate-repeat.ng-leave-stagger,
	.animate-repeat.ng-move-stagger {
	  /* 200ms will be applied between each sucessive enter operation */ 
	  -webkit-transition-delay:0.2s;
	  transition-delay:0.2s;
	}

	.animate-repeat.ng-enter,
	.animate-repeat.ng-leave {
	    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	    opacity:0;
	}

	.animate-repeat.ng-leave.ng-leave-active,
	.animate-repeat.ng-enter {
	    opacity: 0;
	    height: 0px;
	}

	.animate-repeat.ng-enter.ng-enter-active,
	.animate-repeat.ng-leave {
	    opacity: 1;
	    // height: 200px;
	}

	#wrapper {
	    padding-left: 0;
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	#wrapper.toggled {
	    padding-left: 250px;
	}

	#sidebar-wrapper {
	    z-index: 1000;
	    position: fixed;
	    left: 250px;
	    width: 0;
	    height: 100%;
	    margin-left: -250px;
	    overflow-y: auto;
	    background: #000;
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	#wrapper.toggled #sidebar-wrapper {
	    width: 250px;
	}

	#page-content-wrapper {
	    width: 100%;
	    position: absolute;
	    padding: 15px;
	}

	#wrapper.toggled #page-content-wrapper {
	    position: absolute;
	    margin-right: -250px;
	}
	/* Sidebar Styles */

	.sidebar-nav {
	    position: absolute;
	    top: 0;
	    width: 250px;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}

	.sidebar-nav li {
	    text-indent: 20px;
	    line-height: 40px;
	}

	.sidebar-nav li a {
	    display: block;
	    text-decoration: none;
	    color: #999999;
	}

	.sidebar-nav li a:hover {
	    text-decoration: none;
	    color: #fff;
	    background: rgba(255, 255, 255, 0.2);
	}

	.sidebar-nav li a:active,
	.sidebar-nav li a:focus {
	    text-decoration: none;
	}

	.sidebar-nav > .sidebar-brand {
	    height: 65px;
	    font-size: 18px;
	    line-height: 60px;
	}

	.sidebar-nav > .sidebar-brand a {
	    color: #999999;
	}

	.sidebar-nav > .sidebar-brand a:hover {
	    color: #fff;
	    background: none;
	}

	@media(min-width:768px) {
	    #wrapper {
	        padding-left: 250px;
	    }
	    #wrapper.toggled {
	        padding-left: 0;
	    }
	    #sidebar-wrapper {
	        width: 250px;
	    }
	    #wrapper.toggled #sidebar-wrapper {
	        width: 0;
	    }
	    #page-content-wrapper {
	        padding: 20px;
	        position: relative;
	    }
	    #wrapper.toggled #page-content-wrapper {
	        position: relative;
	        margin-right: 0;
	    }
	}

/*Styles for redirect page*/
.redirect-page {
    background: #F5F8FA;
    height: 100%;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0;
    padding: 10px
}

.loading-redirect {
    font-size: 50px;
    height: 1em;
    -webkit-animation: fadeout .5s 5s;
    animation: fadeout .5s 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.loading-redirect span {
    -webkit-animation: fadein .5s .5s alternate infinite;
    animation: fadein .5s .5s alternate infinite
}

.loading-redirect span:nth-child(2) {
    -webkit-animation-delay: .75s;
    animation-delay: .75s
}

.loading-redirect span:nth-child(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

#redirect-text {
    text-align: center;
    font-family: helvetica;
    opacity: 0;
    -webkit-animation: fadein .5s 3s;
    animation: fadein .5s 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.overflow {
    background: #000;
    color: #fff;
    max-width: 100%;
    text-align: left
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
        -webkit-transform: scale(.2)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

@-webkit-keyframes fadeout {
    to {
        opacity: 0;
        height: 0
    }
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: scale(.2)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes fadeout {
    to {
        opacity: 0;
        height: 0
    }
}

.loading-redirect-img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.navbar.navbar-static-top {
	height: 50px;
}

.navbar.navbar-collapse a {
	-webkit-transition: all .10s ease-in-out;
	transition: all .10s ease-in-out;
	color: black !important;
	padding-bottom: 10px;
}

div.title-as-current-search-term > span {
	margin-left:47%;
}

form#tweet > div.modal-body {
    background-color: #E5F2F7;
}

form#tweet > div.modal-footer {
    background-color: #E5F2F7;
    margin-top: -1%;
}


a.external-hashtag:hover {
	text-decoration: underline;	
}

a.external-mention:hover {
	text-decoration: underline;
}

a.external_link:hover {
	text-decoration: underline;
}

div.tweet-content > p.tweet-content-text {
	word-wrap: break-word;
}

div.linear-content.row > p.linear-content-text {
	word-wrap: break-word;
}

output {
	text-align: left;
	margin-bottom: 10px;
}

output > span > img {
	width:50px;
	height:50px;
}

// Override admin.scss
.modal-footer {
	border: none;
}